<template>
    <div
        class="main"
    >
        <h2>{{ props.data.name }}</h2>
        <h6>总分:{{ props.data.total_score }}</h6>
        <div>
            <span>任务分析: </span>
            <span></span>
            <span>{{ props.data.task_analysis_score }}</span>
            <span>权重: {{ props.data.task_analysis_weight }} %</span>
        </div>
        <n-divider/>
        <div>
            <span>任务执行: </span>
            <span></span>
            <span>{{ props.data.task_perform_score }}</span>
            <span>权重: {{ props.data.task_perform_weight }} %</span>
        </div>
        <n-divider/>
        <div>
            <span></span>
            <span>表格评分: </span>
            <span>{{ props.data.task_perform_table_score }}</span>
            <span>权重: {{ props.data.task_perform_table_weight }} %</span>
        </div>
        <div>
            <span></span>
            <span>图形评分: </span>
            <span>{{ props.data.task_perform_picture_score }}</span>
            <span>权重: {{ props.data.task_perform_picture_weight }} %</span>
        </div>
        <n-divider/>
    </div>
  <div>
    <p>学生总结: </p>
    <br>
    <n-input disabled v-model:value="props.data.summary" type="textarea" style="width: 97%;max-height: 20%"/>
  </div>
</template>

<script setup>
const props = defineProps(["data"])
</script>

<style scoped lang="less">
.main {
    display: flex;
    flex-direction: column;
    align-items: center;

    h6 {
        margin-top: 5px;
        color: rgba(0, 0, 0, 0.60);
    }

    > div {
        display: flex;
        height: 2vh;
        width: 95%;

        > span {
            flex: 10;
            text-align: center;

            &:nth-child(-n+2) {
                flex: 5;
            }
        }
    }
}
</style>